9. HTML Forms - Full Guide

I. Form Structure

<form> tag HTML mein ek form banane ke liye use hoti hai. Form ke andar input, label, button jaise elements hote hain jo user se data collect karte hain.

• action: Ye batata hai ki form data kis page ya URL par bhejna hai.
• method: Ye define karta hai data bhejne ka method - GET ya POST.
• label: User ko input ka naam dikhata hai, aur accessibility ke liye important hota hai.

<form action="/submit" method="post"> <label for="username">Your Name:</label> <input type="text" id="username" name="username"><br><br> <label for="email">Your Email:</label> <input type="email" id="email" name="email"><br><br> <input type="submit" value="Send"> </form> Run Code

II. Input Field Types

Input tag ke type attribute se hum batate hain kis tarah ka data input hoga:

• text: Normal text
• email: Email input with validation
• password: Hidden input (for passwords)
• radio: Ek hi option select karne ke liye
• checkbox: Multiple options select karne ke liye
• date: Date picker
• file: File upload karne ke liye

<form> Name: <input type="text" name="name"><br><br> Email: <input type="email" name="email"><br><br> Password: <input type="password" name="pwd"><br><br> Gender: <input type="radio" name="gender" value="male"> Male <input type="radio" name="gender" value="female"> Female<br><br> Skills: <input type="checkbox" name="skill" value="html"> HTML <input type="checkbox" name="skill" value="css"> CSS<br><br> DOB: <input type="date" name="dob"><br><br> Upload Resume: <input type="file" name="resume"><br><br> <input type="submit" value="Register"> </form> Run Code

III. Validation Basics

Form mein validation ke liye HTML attributes ka use hota hai jaise:

• required: Field empty nahi chhoda ja sakta.
• min, max: Numbers ke liye limit set karta hai.
• pattern: Regular Expression ke through matching.

<form> Email: <input type="email" name="email" required><br><br> Age: <input type="number" name="age" min="18" max="60" required><br><br> Password: <input type="password" name="pwd" pattern=".{6,}" title="Minimum 6 characters required"><br><br> <input type="submit" value="Validate"> </form> Run Code